import { useState } from "react"
import { Modal, message } from 'antd';
import styles from './index.less'
import { QRCodeSVG } from 'qrcode.react';
import ReactDOM from "react-dom";
import { IShareItem } from "@/types";

interface IProps{
  data: IShareItem
}

const ShareModal: React.FC<IProps> = ({data}) => {
  const error = () => {
    message.error('未知错误!');
    message.error('分享海报制作失败，请手动截图');
  };

  const handleCancel = () => {
    ReactDOM.unmountComponentAtNode(document.querySelector('.share-dialog') as Element);
  };

  return <Modal title="分享海报" okText='下载' cancelText="关闭" width="400px" visible={true} onOk={error} onCancel={handleCancel}>
    <div className={styles.sharesImg}>
      <img src={data.cover} alt="" />
    </div>
    <div className={styles.bold}>{data.title}</div>
    <div className={styles.summary}>{data.summary}</div>
    <div>
      <div className={styles.contentQrcode}>
        <QRCodeSVG value={`/article/${data.id}`} />
        <div className={styles.contentRight}>
          <p>识别二维码查看文章</p>
          <p>原文分享自 八维创作平台</p>
        </div>
      </div>
    </div>
  </Modal>
}

export function share(data: IShareItem){
  let container = document.querySelector('.share-dialog');
  if (!container){
    container = document.createElement('div');
    container.className = 'share-dialog';
    document.body.appendChild(container)
  }

  ReactDOM.render(<ShareModal data={data}/>, container);
}

export default ShareModal;
